{% extends('layout.html')%}
{% block body %}
<div class="container center-align valign-wrapper">
    <div id="login-page" class="row">
        <div class="col z-depth-4 card-panel">
            <form class="login-form" method="post" action="/login">
                <div class="row">
                    <div class="input-field col s12 center">
                        <h3 class="center red-text">Please Login</h3>
                        <p>In order to proceed futher, you must login.</p>
                        {% if login_error %}
                        <h6 class="center red-text">{{login_error}}</h6>
                        {% endif %}
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <i class="material-icons prefix">person_outline</i>
                        <input name="username" type="text" class="validate" id="username" autocorrect="off"
                            autocapitalize="none" autocomplete="off" required>
                        <label for="username" class="center-align">Username</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <i class="material-icons prefix">lock_outline</i>
                        <input name="password" id="password" type="password" class="validate" required>
                        <label for="password">Password</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <button type="submit" name="submit" id="submit"
                            class="btn waves-effect waves-light red lighten-2 col s12">Login</button>
                    </div>
                </div>


            </form>
        </div>
    </div>
</div>
{% endblock %}